<!--
 * @Author: fisher
 * @Date: 2022-10-24 09:36:48
 * @LastEditTime: 2022-10-26 17:32:21
 * @LastEditors: fisher
 * @Description: 
 * @FilePath: \tauri_app\src\views\home\data.vue
-->
<template>
  <div>
    <div class="area">
      <div class="area_item">
        <span><b>*</b> x</span>
        <el-input v-model="inputX" placeholder="Please input" />
      </div>
      <div class="area_item">
        <span><b>*</b> y</span>
        <el-input v-model="inputY" placeholder="Please input" />
      </div>
      <div class="area_item">
        <span><b>*</b> 当前坐标系</span>
        <el-select
          v-model="axisInput"
          class="m-2"
          placeholder="Select"
          size="large"
        >
          <el-option
            v-for="item in axisOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="area_item">
        <span><b>*</b> 目标坐标系</span>
        <el-select
          v-model="axisOutput"
          class="m-2"
          placeholder="Select"
          size="large"
        >
          <el-option
            v-for="item in axisOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <!-- <div class="area">

      <div class="area_item">
        <span>结果</span>
        <el-input v-model="result" placeholder="点击transform获取结果" />
        <el-button type="primary" round @click="copyresult">copy</el-button>
      </div>
    </div> -->
    <el-button class="transform" type="primary" round @click="transform"
      >transform</el-button
    >
  </div>
</template>

<script setup>
import { ref } from "vue";
import GeoTransform from "geotransform";
let gt = new GeoTransform();
let inputX = ref("");
let inputY = ref("");
let axisInput = ref("");
let axisOutput = ref("");
// let result = ref("");
const axisOptions = [
  {
    value: "GCJ02",
    label: "高德坐标",
  },
  {
    value: "BD09",
    label: "百度坐标",
  },
  {
    value: "BD09MC",
    label: "百度墨卡托坐标",
  },
  {
    value: "EPSG3857",
    label: "墨卡托坐标",
  },
  {
    value: "WGS84",
    label: "WGS84",
  },
  {
    value: "EPSG:4547",
    label: "EPSG:4547",
  },
  {
    value: "EPSG:4490",
    label: "EPSG:4490",
  },
];
const transform = () => {
  // 判断必选项
  if (
    inputX.value == "" ||
    inputY.value == "" ||
    axisInput.value == "" ||
    axisOutput.value == ""
  ) {
    ElNotification({
      title: "Warning",
      message: "请补充完整*内容",
      type: "warning",
      position: "top-left",
      duration: 3000,
    });
    return false;
  }
  const coords = [parseFloat(inputX.value), parseFloat(inputY.value)];
  const res = gt.transform(axisInput.value, axisOutput.value, coords);
  openMessage(res);
};
const openMessage = (val) => {
  ElMessageBox.alert(
    `<span>转换结果为：<b>${val}</b> </span>
    <br/>
    <br/>
    <span>结果已复制在剪切板</span>`,
    "结果",
    {
      dangerouslyUseHTMLString: true,
    }
  );
  copyToClip(val);
};
// const copyresult = () => {
//   copyToClip(result.value);
// };
const copyToClip = (content) => {
  const input = document.createElement("input");
  input.setAttribute("value", content);
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy");
  document.body.removeChild(input);
};
</script>
<style  scoped>
.area {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 15px;
}
.area_item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
}
.area_item > span {
  width: 150px;
  flex-shrink: 0;
  text-align: right;
}
.transform {
  width: 200px;
  height: 50px;
  font-size: 24px;
  cursor: pointer;
  position: absolute;
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%);
}
b {
  color: red;
}
</style>